<!-- 用户操作详情 -->
<template>
	<div class="app-container">
		<div class="overview-box">
			<div class="overview-title">
				<div class="circle"></div>
				<span class="title-label">用户操作详情</span>
			</div>

			<el-row class="overview-row">
				<el-col :span="5">
					<div class="overview-label">用户标识：</div>
					<div class="overview-text">{{ businessDetailData.userIdentify }}</div>
				</el-col>
				<el-col :span="5">
					<div class="overview-label">请求IP：</div>
					<div class="overview-text">{{ businessDetailData.requestIp }}</div>
				</el-col>
				<el-col :span="6">
					<div class="overview-label">系统名称：</div>
					<div class="overview-text">{{ businessDetailData.systemName }}</div>
				</el-col>
				<el-col :span="6">
					<span class="detail-item">业务名称：</span>
					<span class="detail-value">{{ businessDetailData.businessName }}</span>
				</el-col>
			</el-row>

			<el-row class="overview-row">
				<el-col :span="5">
					<div class="overview-label">开始时间：</div>
					<div class="overview-text">{{ businessDetailData.startTime }}</div>
				</el-col>
				<el-col :span="5">
					<div class="overview-label">结束时间：</div>
					<div class="overview-text">{{ businessDetailData.endTime }}</div>
				</el-col>
				<el-col :span="6">
					<div class="overview-label">办理时长：</div>
					<div class="overview-text">{{ formatDealTime }}</div>
				</el-col>
				<el-col :span="6">
					<span class="detail-item">告警量：</span>
					<span class="detail-value">{{ businessDetailData.alarmCount }}</span>
				</el-col>
			</el-row>
			<el-row class="overview-row">
				<el-col :span="22">
					<div class="overview-label">专属指标：</div>
					<div class="overview-text">{{ businessDetailData.exclusiveIndicator }}</div>
				</el-col>
				<el-col :span="2">
					<el-link icon="el-icon-document-copy" :underline="false" style="color: #ffffff" @click.native="copyIndicator">复制 </el-link>
				</el-col>
			</el-row>
		</div>

		<div class="container-bg">
			<div class="overview-title">
				<div class="circle"></div>
				<span class="title-label">用户操作业务步骤列表</span>
			</div>
			<YdTable
				:formData="formData"
				:tableConfig="tableConfig"
				:tableData="tableData.data"
				ref="busiStepTableRef"
				@sizeChangeHandler="searchHandler"
				@currentChangeHandler="searchHandler"
				@sortChangeHandler="searchHandler"
				@expandRowHandler="expandRowHandler"
			>
				<!-- 告警数展开列表 -->
				<template #expand="props">
					<YdTable
						:formData="alarmFormData"
						:tableConfig="alarmTableConfig"
						:tableData="alarmTableData[props.data.id].data"
						@sortChangeHandler="searchDetailHandler"
					></YdTable>
				</template>
			</YdTable>
		</div>

		<div class="container-bg" v-if="is_Itshow">
			<div class="overview-title">
				<div class="circle"></div>
				<span class="title-label">业务步骤IT路径图</span>
			</div>
			<yd-it-road
				v-if="is_Itshow"
				v-loading="e2eRelationConfig.loading"
				ref="ydItRoadRef"
				:config="{ type: 'StepEndToEndRelation', canvasHeight: 400, noDataFlag: false, customOptions: e2eRelationConfig.customOptions }"
				@dblclickNode="dblclickNodeHandler"
				@dragNode="updateSegmentPos"
			></yd-it-road>
		</div>

		<div class="container-bg">
			<div class="overview-title">
				<div class="circle"></div>
				<span class="title-label">节点信息</span>
			</div>
			<YdTable
				:formData="e2eDetail.formData"
				:tableConfig="e2eDetail.tableConfig"
				:tableData="tableData2.data"
				@sizeChangeHandler="searchNodeInfo"
				@currentChangeHandler="searchNodeInfo"
				@sortChangeHandler="searchNodeInfo"
				ref="busiStepTableRef1"
				@expandRowHandler="expandRowHandler1"
			>
				<!-- 告警数展开列表 -->
				<template #expand="props">
					<YdTable
						:formData="alarmFormData1"
						:tableConfig="alarmTableConfig1"
						:tableData="alarmTableData1[props.data.id].data"
						@sortChangeHandler="searchDetailHandler1"
					></YdTable>
				</template>
			</YdTable>
		</div>
	</div>
</template>
<script setup name="BusiUserOperateDetail" lang="tsx">
import { onActivated, reactive, ref, shallowRef, getCurrentInstance, nextTick } from 'vue';
import { useRoute } from 'vue-router';

import YdItRoad from '@/components/YdItRoad/index.vue';
import { copyMsg, toDecimalFormate, parseTime, getLastNodeArr } from '@/utils/common';
import {
	queryOperateOverview,
	stepEndToEndRelation,
	queryEndToEndDetail,
	updateSegmentPosition,
	getBaseAlarmList,
} from '@/api/bpm/analysis/busi_user_operate_detail';

import { queryBusinessStepListPage } from '@/api/bpm/business/business_detail';
import { GraphData, NodeConfigType } from '@/components/YdItRoad/itRoad-type';
import useIsParamsChange from '@/components/YdForm/useIsParamsChange';
const instance = getCurrentInstance();
const proxy = instance?.proxy;

let ydItRoadRef = shallowRef<InstanceType<typeof YdItRoad>>();
let busiStepTableRef = ref();
let busiStepTableRef1 = ref();
// 搜索表单数据
const is_Itshow = ref(true);
const route = useRoute();
const formData = reactive<FormModelType>({});
// 用户操作业务步骤列表配置
const tableConfig = reactive<TableConfigType>({
	columns: [
		{
			label: '请求URL',
			prop: 'requestUrl',
		},
		{
			label: '业务名称',
			prop: 'businessName',
		},
		{
			label: '步骤名称',
			prop: 'stepName',
		},
		{
			label: '请求IP端口',
			prop: 'requestIp',
			formatter(row: any, val: any) {
				return val + ':' + row.requestPort;
			},
		},
		{
			label: '响应IP端口',
			prop: 'responseIp',
			formatter(row: any, val: any) {
				return val + ':' + row.responsePort;
			},
		},
		{
			label: '响应状态',
			prop: 'responseStatus',
		},
		{
			label: '系统返回码',
			prop: 'serverResCode',
		},
		{
			label: '告警数',
			prop: 'alarmCount',
			width: 90,
			operation: [
				{
					rowKey: 'alarmCount',
					handler: (scope: any) => handleClickAlarm(scope.row),
				},
			],
		},
		{
			label: '请求开始时间',
			prop: 'startTime',
		},
		{
			label: '响应结束时间',
			prop: 'endTime',
		},
		{
			label: '处理时长',
			prop: 'dealTime',
			width: 100,
			formatter(row: any, val: any) {
				return toDecimalFormate(val, 'wm');
			},
		},
		{
			label: 'IT路径图',
			prop: '',
			width: 100,
			render: (row: any, val: any) => {
				const isActive = row.businessStepDataId === e2eRelationConfig.preRelvanceId;
				const o = {
					systemId: row.systemId,
					preRelvanceId: row.businessStepDataId + '',
					type: 2,
					resourceCode: row.resourceCode,
					startTimeUsec: row.startTimeUsec,
					endTimeUsec: row.endTimeUsec,
					id: row.id,
					is_Itshow: row.is_Itshow,
				};
				return (
					<div onClick={() => renderEndToEndRelation(o)} style={row.is_Itshow ? 'cursor: pointer; color: #2beded;' : 'cursor: pointer;'}>
						<svg-icon icon-class={row.is_Itshow ? 'eye-open' : 'eye'} style="margin-right: 6px;"></svg-icon>
					</div>
				);
			},
		},
	],
	pagination: {
		pageNum: 1,
	},
	loading: true,
	expandHide: true,
	// disableOrderNumber: true,
});
// 列表数据
const tableData = reactive<anyObj>({
	data: [],
});
// 告警数展开列表表单数据
const alarmFormData = reactive<FormModelType>({
	systemId: null,
	relvanceDataId: '',
	startTime: '',
	endTime: '',
});

// 告警数展开列表配置
const alarmTableConfig = reactive<TableConfigType>({
	columns: [
		{
			label: '告警对象',
			prop: 'alarmObject',
			align: 'center',
			width: 320,
		},
		{
			label: '告警级别',
			prop: 'alarmLevelName',
			align: 'center',
			width: 90,
		},
		{
			label: '告警现象',
			prop: 'alarmContext',
			align: 'center',
			width: 380,
		},
		{
			label: '告警类型',
			prop: 'alarmIndicatorName',
			align: 'center',
			width: 120,
		},
		{
			label: '返回码',
			prop: 'alarmResultCode',
			align: 'center',
			width: 80,
		},
		{
			label: '告警时间',
			prop: 'alarmTriggerTime',
			align: 'center',
			sortable: true,
			width: 170,
		},
		{
			label: '专属指标',
			prop: 'exclusiveIndicator',
			align: 'center',
		},
	],
	pagination: {
		pageNum: 1,
	},
	loading: true,
});
// 告警数展开列表数据
const alarmTableData = reactive({});
// 告警数展开列表表单数据
const alarmFormData1 = reactive<anyObj>({});
// 告警数展开列表配置
const alarmTableConfig1 = reactive<TableConfigType>({
	columns: [
		{
			label: '告警对象',
			prop: 'alarmObject',
			align: 'center',
			width: 320,
		},
		{
			label: '告警级别',
			prop: 'alarmLevelName',
			align: 'center',
			width: 90,
		},
		{
			label: '告警现象',
			prop: 'alarmContext',
			align: 'center',
			width: 380,
		},
		{
			label: '告警类型',
			prop: 'alarmIndicatorName',
			align: 'center',
			width: 120,
		},
		{
			label: '返回码',
			prop: 'alarmResultCode',
			align: 'center',
			width: 80,
		},
		{
			label: '告警时间',
			prop: 'alarmTriggerTime',
			align: 'center',
			sortable: true,
			width: 170,
		},
		{
			label: '专属指标',
			prop: 'exclusiveIndicator',
			align: 'center',
		},
	],
	pagination: {
		pageNum: 1,
	},
	loading: true,
});
// 告警数展开列表数据
const alarmTableData1 = reactive({});
// 告警数展开列表对应的步骤id
const tempSysProcessId = ref('');
// 业务详单数据
let businessDetailData = reactive<anyObj>({});
// 端到端关联图配置
const e2eRelationConfig = reactive<anyObj>({
	loading: false,
	mode: 'default',
	preRelvanceId: undefined,
	firstLoad: true,
	customOptions: {
		maxZoom: 1.5,
		layout: {
			type: 'dagre',
			rankdir: 'LR',
			nodesep: 60,
			ranksep: 110,
		},
		modes: {
			// 默认模式
			defaultMode: [
				// 节点高亮(自定义)
				'activate-node',
			],
		},
		// 工具按钮
		toolbarObj: {
			getContent: () => {
				const outDiv = document.createElement('div');
				outDiv.style.width = '120px';
				outDiv.innerHTML = `<ul>
					<li code="edit"><i id="iconEditId" class="el-icon-edit-outline"></i></li>
				  </ul>`;
				return outDiv;
			},
			handleClick: (code: any, graph: any) => {
				if (code === 'edit') {
					if (e2eRelationConfig.mode === 'default') {
						e2eRelationConfig.mode = 'edit';
						document.getElementById('iconEditId')!.style.color = '#2beded';
					} else {
						e2eRelationConfig.mode = 'default';
						document.getElementById('iconEditId')!.style.color = '#ffffff';
					}
					ydItRoadRef.value?.setGraphMode(e2eRelationConfig.mode);
				}
			},
		},
	},
});
// 端到端节点详情
const e2eDetail = reactive<anyObj>({
	// 搜索表单数据
	formData: {
		pageNum: 1,
		pageSize: 10,
	},
	// 列表配置
	tableConfig: {
		columns: [
			{
				label: '业务资源',
				prop: 'resource',
			},
			{
				label: '请求IP端口',
				prop: '',
				width: 160,
				formatter(row: any, val: any) {
					return row.requestIp + ':' + row.requestPort;
				},
			},
			{
				label: '响应IP端口',
				prop: '',
				width: 160,
				formatter(row: any, val: any) {
					return row.responseIp + ':' + row.responsePort;
				},
			},
			{
				label: '系统返回码',
				prop: 'serverResCode',
				width: 90,
			},
			{
				label: '业务状态',
				prop: 'dealState',
				width: 80,
				formatter(row: any, val: any) {
					if (val === 1) {
						return '成功';
					}
					return '失败';
				},
			},
			{
				label: '响应时长',
				prop: 'serverResponseTime',
				width: 90,
				formatter(row: any, val: any) {
					return toDecimalFormate(val, 'wm');
				},
			},
			{
				label: '请求开始时间',
				prop: 'startTime',
			},
			{
				label: '响应结束时间',
				prop: 'endTime',
			},
			{
				label: '处理时长',
				prop: 'dealTime',
				width: 90,
				formatter(row: any, val: any) {
					return toDecimalFormate(val, 'wm');
				},
			},
			{
				label: '客户端网络传输时长',
				prop: 'clientTranslateTime',
				width: 90,
				formatter(row: any, val: any) {
					return toDecimalFormate(val, 'wm');
				},
			},
			{
				label: '服务端网络传输时长',
				prop: 'serverTranslateTime',
				width: 90,
				formatter(row: any, val: any) {
					return toDecimalFormate(val, 'wm');
				},
			},
			{
				label: '告警量',
				prop: 'alarmCount',
				width: 80,
				operation: [
					{
						text: undefined,
						rowKey: 'alarmCount',
						handler: (scope: any) => handleClickAlarm1(scope.row),
					},
				],
			},
			{
				label: '专属指标',
				prop: 'exclusiveIndicator',
			},
		],
		pagination: {
			pageNum: 1,
		},
		loading: true,
		expandHide: true,
	},
	// 列表数据
});
//节点信息
const tableData2 = reactive<anyObj>({
	data: [],
	total: 0,
});
// 系统id
const tempSystemId = ref(null);
// 当前选中端首端标识(默认首端)
const currentHeaderFlag = ref(1);

const { isParamsChange } = useIsParamsChange(route.query); //query是否改变

onActivated(() => {
	initQuery(route.query, formData);
	// 渲染业务详情
	renderDetailInfo();
	// 搜索业务步骤列表
	searchHandler();
});
const formatDealTime = ref(null);
// 格式化传过来的参数
function initQuery(query: anyObj, formData: FormModelType) {
	try {
		let data = JSON.parse(query.data);
		for (let key in data) {
			formData[key] = data[key];
		}
	} catch {
		for (let key in query) {
			formData[key] = query[key];
		}
	}
}
// 渲染业务详情
const renderDetailInfo = () => {
	queryOperateOverview({
		businessDetailId: formData.businessDetailId,
		startTime: formData.startTime,
		endTime: formData.endTime,
	}).then((res: ApiResponse) => {
		if (res.code !== 0) {
			return;
		}
		const result = res.data[0];
		console.log('result', result);
		if (result) {
			businessDetailData.userIdentify = result.userIdentify;
			businessDetailData.requestIp = result.requestIp;
			businessDetailData.systemName = result.systemName;
			businessDetailData.businessName = result.businessName;
			businessDetailData.startTime = result.startTime;
			businessDetailData.endTime = result.endTime;
			businessDetailData.alarmCount = result.alarmCount;
			businessDetailData.exclusiveIndicator = result.exclusiveIndicator;
			formatDealTime.value = toDecimalFormate(result.dealTime, 'wm');
		}
	});
};
// 复制专属指标
const copyIndicator = () => {
	if (copyMsg(businessDetailData.exclusiveIndicator)) {
		proxy?.$message.success('专属指标复制成功');
	}
};
// 查询用户操作业务步骤列表
const searchHandler = () => {
	tableConfig.loading = true;
	queryBusinessStepListPage(formData).then((res: ApiResponse) => {
		tableConfig.loading = false;
		if (res.code !== 0) {
			return;
		}
		tableData.data = res.data.data;
		tableConfig.pagination!.total = res.data.total;
		for (var i of res.data.data) {
			i.is_Itshow = false;
		}
		if (res.data.data[0] != undefined) {
			res.data.data[0].is_Itshow = true;
		}
		e2eDetail.tableConfig.loading = false;
		// tableData2 = [];
		// 如果有数据，默认展示第一条步骤的端到端关联图
		if (tableData.data.length > 0) {
			const firstData = tableData.data[0];
			tempSystemId.value = firstData.systemId;
			renderEndToEndRelation({
				systemId: firstData.systemId,
				preRelvanceId: firstData.businessStepDataId + '',
				resourceCode: firstData.resourceCode,
				startTimeUsec: firstData.startTimeUsec,
				endTimeUsec: firstData.endTimeUsec,
				type: 2,
				businessCode: firstData.businessCode,
				stepCode: firstData.stepCode,
			});
			e2eRelationConfig.firstLoad = false;
		}
		// 初始化告警数展开列表
		tableData.data.forEach((ov: any) => {
			alarmTableData[ov.id] = {
				data: [],
				total: 0,
			};
			//   proxy?.$set(alarmTableData, ov.id, {
			//   data: [],
			//   total: 0,
			// });
		});
	});
};
// 业务步骤表格点击告警数展开表格
const handleClickAlarm = (row: any) => {
	busiStepTableRef.value.getTableRef().toggleRowExpansion(row);
};
// 展开行查询告警数列表
const expandRowHandler = (row: any) => {
	tempSysProcessId.value = row.id;
	alarmFormData.systemId = row.systemId;
	alarmFormData.relvanceDataId = row.businessStepDataId;
	alarmFormData.startTime = parseTime(row.startTime, '{y}-{m}-{d} {h}:{i}') + ':00';
	alarmFormData.endTime = parseTime(row.endTime, '{y}-{m}-{d} {h}:{i}') + ':00';
	nextTick(() => {
		searchDetailHandler();
	});
};
// 获取告警数列表数据
const searchDetailHandler = () => {
	alarmTableConfig.loading = true;
	getBaseAlarmList({
		...alarmFormData,
		pageNum: 1,
		pageSize: 10,
	}).then((res: ApiResponse) => {
		alarmTableConfig.loading = false;
		if (res.code !== 0) {
			return;
		}
		// proxy?.$set(alarmTableData, tempSysProcessId, {
		//   data: res.data.data,
		//   total: res.data.total,
		// });
		alarmTableData[tempSysProcessId.value].data = res.data.data;
		alarmTableConfig.pagination!.total = res.data.total;
	});
};

// 渲染端到端关联图
const renderEndToEndRelation = (o: any) => {
	if (o.id == undefined) {
		tableData.data[0].is_Itshow = true;
		is_Itshow.value = true;
	} else {
		for (var j of tableData.data) {
			if (j.id == o.id && o.is_Itshow == false) {
				j.is_Itshow = true;
				is_Itshow.value = true;
			} else if (j.id == o.id && o.is_Itshow == true) {
				j.is_Itshow = false;
				is_Itshow.value = false;
				tableData.data = JSON.parse(JSON.stringify(tableData.data));
				return;
			} else {
				j.is_Itshow = false;
			}
		}
	}
	e2eRelationConfig.loading = true;
	o.id = undefined;
	o.is_Itshow = undefined;
	o.detailId = formData.businessDetailId;
	stepEndToEndRelation(o).then((res: ApiResponse) => {
		e2eRelationConfig.loading = false;
		// 清除画布
		ydItRoadRef.value?.graph.clear();
		if (res.code !== 0) {
			// 接口异常
			return;
		}
		e2eRelationConfig.preRelvanceId = o.preRelvanceId;
		e2eRelationConfig.startTimeUsec = o.startTimeUsec;
		e2eRelationConfig.endTimeUsec = o.endTimeUsec;
		const d: GraphData = {
			nodes: [],
			edges: [],
		};
		const showVoList: any[] = res.data;
		// const showVoList = resultData.result;

		if (showVoList.length <= 0) {
			// 无数据
			return;
		}
		let isSavePos = true;
		// 将布局方式还原为默认
		// ydItRoadRef.value?.setLayout(e2eRelationConfig.customOptions.layout);
		// 临时节点数组
		const tempNodes = [];
		// 不进行展示的端id数组
		const noShowIdList = [];
		formatGraphData(res.data);
		function formatGraphData(arr: any[], idKey = 'id') {
			if (arr instanceof Array === false) {
				console.error('arr不是数组---------');
				return;
			}
			arr.forEach((node: any) => {
				node.id = node.id + '';
				if (node.locationX) {
					// 采用自定义布局
					isSavePos = false;
					ydItRoadRef.value?.setLayout({
						type: 'stepAnalysisLayout',
					});
				}

				let index = d.nodes.findIndex((n) => n.id === node.id);
				// 没有的节点才加进去
				if (index === -1 && node.show) {
					// 设置x、y坐标
					d.nodes.push(dealNodeData(node));
				}
				if (node.childNodes instanceof Array) {
					const clientTransTime = node.clientTransTime === null ? '' : node.clientTransTime + 'ms';
					const serverTransTime = node.serverTransTime === null ? '' : node.serverTransTime + 'ms';
					node.childNodes.forEach((subNode: any) => {
						d.edges.push({
							source: node[idKey] + '',
							target: subNode[idKey] + '',
							sourceAnchor: 2,
							targetAnchor: 0,
							label: clientTransTime,
							labelCfg: {
								refY: 10,
								style: {
									fill: '#ffffff',
								},
							},
						});
						d.edges.push({
							source: subNode[idKey] + '',
							target: node[idKey] + '',
							sourceAnchor: 1,
							targetAnchor: 3,
							label: serverTransTime,
							labelCfg: {
								refY: 10,
								style: {
									fill: '#ffffff',
								},
							},
						});
					});
					formatGraphData(node.childNodes);
				}
			});
		}
		console.log('d', d);

		// 去掉最后一端的请求后端开始时间、后端响应结束时间、后端处理时长
		let lastNodeArr = getLastNodeArr(d.edges, d.nodes);
		if (lastNodeArr.length > 0) {
			lastNodeArr[0].indicatorText = lastNodeArr[0].lastIndicatorText;
			lastNodeArr[0].indicatorValText = lastNodeArr[0].lastIndicatorValText;
		}

		// 渲染关联图
		ydItRoadRef.value?.loadItRoadData(d);

		// 判断是否保存端位置
		if (isSavePos) {
			const nodes = ydItRoadRef.value?.getAllNodes();
			nodes.forEach((node: any) => {
				const model = node.getModel();
				updateSegmentPos(null, {
					segmentId: model.id,
					locationX: model.x,
					locationY: model.y,
				});
			});
		}
		// 默认展示第一个节点信息
		if (d.nodes.length > 0) {
			// 默认当前选中端首端标识为1
			currentHeaderFlag.value = 1;
			e2eDetail.formData = {
				...e2eDetail.formData,
				dataType: d.nodes[0].info.dataType,
				dataId: d.nodes[0].info.dataId,
				codeList: d.nodes[0].info.resourceCodes,
				startTimeUsec: e2eRelationConfig.startTimeUsec,
				endTimeUsec: e2eRelationConfig.endTimeUsec,
			};
			searchNodeInfo();
			ydItRoadRef.value?.setItemStateById(d.nodes[0].id, 'selected', true);
		}
	});
};

// 处理node节点数据
function dealNodeData(detail: NodeConfigType) {
	// 设置指标名称文本和值文本
	let indicatorText = '',
		indicatorValText = '';
	// 最后一端的指标名称文本和值文本
	let lastIndicatorText = '',
		lastIndicatorValText = '';
	if (detail.segmentId === 0) {
		// 客户端
		indicatorText += 'IP端口\n';
		indicatorValText += detail.ipPort + '\n';
		if (detail.requestMac !== null && detail.requestMac !== '') {
			indicatorText += 'Mac\n';
			indicatorValText += detail.requestMac + '\n';
		}
		indicatorText += '请求开始时间\n响应结束时间\n后端处理时长\n状态';
		indicatorValText += detail.startTime + '\n' + detail.endTime + '\n' + toDecimalFormate(detail.dealTime, 'wm') + '\n' + detail.state;
	} else if (detail.oneFlag === 1 || detail.headerFlag === 1) {
		// 首端
		indicatorText += 'IP端口\n';
		indicatorValText += detail.ipPort + '\n';
		if (detail.responseMac !== null && detail.responseMac !== '') {
			indicatorText += 'Mac\n';
			indicatorValText += detail.responseMac + '\n';
		}
		if (detail.serverResponseStartTime !== null && detail.serverResponseStartTime !== '') {
			indicatorText += '服务器响应开始时间\n';
			indicatorValText += detail.serverResponseStartTime + '\n';
		}
		lastIndicatorText += indicatorText;
		lastIndicatorValText += indicatorValText;

		// 最后一端才有请求后端开始时间、后端响应结束时间、后端处理时长
		if (detail.startTime !== null && detail.startTime !== '') {
			indicatorText += '请求后端开始时间\n';
			indicatorValText += detail.startTime + '\n';
		}
		if (detail.endTime !== null && detail.endTime !== '') {
			indicatorText += '后端响应结束时间\n';
			indicatorValText += detail.endTime + '\n';
		}
		if (detail.dealTime !== null) {
			indicatorText += '后端处理时长\n';
			indicatorValText += toDecimalFormate(detail.dealTime, 'wm') + '\n';
		}
		if (detail.serverResponseEndTime !== null && detail.serverResponseEndTime !== '') {
			indicatorText += '服务器响应结束时间\n';
			indicatorValText += detail.serverResponseEndTime + '\n';
			lastIndicatorText += '服务器响应结束时间\n';
			lastIndicatorValText += detail.serverResponseEndTime + '\n';
		}
		if (detail.serverResponseTime !== null) {
			indicatorText += '服务器响应时长\n';
			indicatorValText += toDecimalFormate(detail.serverResponseTime, 'wm') + '\n';
			lastIndicatorText += '服务器响应时长\n';
			lastIndicatorValText += toDecimalFormate(detail.serverResponseTime, 'wm') + '\n';
		}
		indicatorText += '状态';
		indicatorValText += detail.state;
		lastIndicatorText += '状态';
		lastIndicatorValText += detail.state;
	} else if (detail.startTime !== null && detail.startTime !== '') {
		indicatorText += '服务器响应开始时间\n';
		indicatorValText += detail.serverResponseStartTime + '\n';
		lastIndicatorText += indicatorText;
		lastIndicatorValText += indicatorValText;
		// 最后一端才有请求后端开始时间、后端响应结束时间、后端处理时长
		indicatorText += '请求后端开始时间\n后端响应结束时间\n后端处理时长\n';
		indicatorValText += detail.startTime + '\n' + detail.endTime + '\n' + toDecimalFormate(detail.dealTime, 'wm') + '\n';
		indicatorText += '服务器响应结束时间\n响应时长\n健康度\n状态';
		indicatorValText +=
			detail.serverResponseEndTime +
			'\n' +
			toDecimalFormate(detail.serverResponseTime, 'wm') +
			'\n' +
			(detail.successRate === null ? '' : detail.successRate + '%') +
			'\n' +
			detail.state;
		lastIndicatorText += '服务器响应结束时间\n响应时长\n健康度\n状态';
		lastIndicatorValText +=
			detail.serverResponseEndTime +
			'\n' +
			toDecimalFormate(detail.serverResponseTime, 'wm') +
			'\n' +
			(detail.successRate === null ? '' : detail.successRate + '%') +
			'\n' +
			detail.state;
	} else {
		indicatorText += '服务器响应开始时间\n服务器响应结束时间\n响应时长\n健康度\n状态';
		indicatorValText +=
			detail.serverResponseStartTime +
			'\n' +
			detail.serverResponseEndTime +
			'\n' +
			toDecimalFormate(detail.serverResponseTime, 'wm') +
			'\n' +
			(detail.successRate === null ? '' : detail.successRate + '%') +
			'\n' +
			detail.state;
	}
	const result: NodeConfigType = {
		...detail,
		// segmentName: detail.segmentName,
		x: detail.locationX,
		y: detail.locationY,
		info: JSON.parse(JSON.stringify(detail)),
		indicatorText: indicatorText,
		indicatorValText: indicatorValText,
		lastIndicatorText: lastIndicatorText,
		lastIndicatorValText: lastIndicatorValText,
	};
	return result;
}
// 获取节点状态
const getNodeStatus = (state: any, successRate: any) => {
	if (state === '成功') {
		// normal
		return 1;
	} else if (state === '失败') {
		// danger
		return 3;
	} else if (successRate >= 90) {
		// normal
		return 1;
	} else if (successRate >= 70 && successRate < 90) {
		// alarm
		return 2;
	} else if (successRate >= 0 && successRate < 70) {
		// danger
		return 3;
	} else {
		// no-data
		return 0;
	}
};
// 双击端展示详情信息
const dblclickNodeHandler = (ev: any) => {
	const model = ev.item.getModel();
	if (model.info.segmentId == 0 || model.info.headerFlag == 1) {
		// 客户端或首端
		currentHeaderFlag.value = currentHeaderFlag.value;
	} else {
		// 非客户端、非首端
		currentHeaderFlag.value = currentHeaderFlag.value;
	}
	e2eDetail.formData = {
		...e2eDetail.formData,
		dataType: model.info.dataType,
		dataId: model.info.dataId,
		codeList: model.info.resourceCodes,
		startTimeUsec: e2eRelationConfig.startTimeUsec,
		endTimeUsec: e2eRelationConfig.endTimeUsec,
	};
	searchNodeInfo();
};
// 拖拽端更新坐标
const updateSegmentPos = (ev: any, model: any) => {
	// 编辑模式启动情况下才更新网端位置
	if (e2eRelationConfig.mode === 'edit' || model) {
		const segmentPos = model || {
			segmentId: ev.item.getModel().id,
			locationX: ev.item.getModel().x,
			locationY: ev.item.getModel().y,
		};
		const dId = e2eRelationConfig.preRelvanceId;
		segmentPos.systemId = dId.substring(0, 4) + dId.substring(dId.length - 5);
		if (segmentPos.locationX) {
			updateSegmentPosition(segmentPos).then((res) => {});
		}
	}
};

// 查询节点详情信息列表
const searchNodeInfo = () => {
	e2eDetail.tableConfig.loading = true;
	queryEndToEndDetail(e2eDetail.formData).then((res: ApiResponse) => {
		e2eDetail.tableConfig.loading = false;
		if (res.code !== 0) {
			return;
		}
		tableData2.data = res.data.data;
		e2eDetail.tableConfig.pagination!.total = res.data.total;
		tableData2.data.forEach((ov: any) => {
			// proxy?.$set(alarmTableData1, ov.id, {
			//   data: [],
			//   total: 0,
			// });
			alarmTableData1[ov.id] = {
				data: [],
				total: 0,
			};
		});
	});
};
// 节点信息表格点击告警数展开表格
const handleClickAlarm1 = (row: any) => {
	busiStepTableRef1.value?.toggleRowExpansion(row);
};
// 展开行查询告警数列表--节点信息
const expandRowHandler1 = (row: any) => {
	tempSysProcessId.value = row.id;
	alarmFormData1.systemId = row.systemId;
	alarmFormData1.relvanceDataId = row.idStr;
	alarmFormData1.startTime = parseTime(row.startTime, '{y}-{m}-{d} {h}:{i}') + ':00';
	alarmFormData1.endTime = parseTime(row.endTime, '{y}-{m}-{d} {h}:{i}') + ':00';
	searchDetailHandler1();
};
// 查询告警数列表数据--节点信息
const searchDetailHandler1 = () => {
	const req = {
		...alarmFormData1,
		systemId: tempSystemId.value,
		pageNum: 1,
		pageSize: 10,
	};
	alarmTableConfig1.loading = true;
	getBaseAlarmList(req).then((res: ApiResponse) => {
		alarmTableConfig1.loading = false;
		if (res.code !== 0) {
			return;
		}
		alarmTableData1[tempSysProcessId.value].data = res.data.data;
		alarmTableConfig1.pagination!.total = res.data.total;
	});
};
</script>
<style rel="stylesheet/scss" lang="scss">
.card-body {
	padding: 15px 20px 35px 20px;
}

.detail-item {
	color: #2beded;
}

.detail-value {
	color: #ffffff;
}
</style>
<style rel="stylesheet/scss" lang="scss" scoped>
:deep(.el-table__expand-icon) {
	display: none;
}
.circle {
	display: inline-block;
	width: 8px;
	height: 8px;
	margin-left: 8px;
	margin-right: 8px;
	background-color: #2beded;
	border-radius: 50%;
	-moz-border-radius: 50%;
	-webkit-border-radius: 50%;
}

.container-bg {
	background-color: rgba(29, 39, 75, 0.31);
	border-radius: 12px;
	margin-top: 10px;
	width: 100%;
}

.overview-title {
	padding-top: 16px;
	width: 100%;
	display: flex;
	align-items: center;

	.title-label {
		color: #ffffff;
		font-size: 16px;
		font-weight: bold;
	}
}

.overview-box {
	background-color: rgb(42, 80, 125);
	width: 100%;
	padding-bottom: 10px;

	border: 2px solid #2beded;

	.overview-title {
		padding-top: 0;
		height: 48px;
	}

	.overview-row {
		width: 100%;
		margin-left: 20px;

		.overview-label {
			font-size: 14px;
			color: #2beded;
			margin-bottom: 6px;
			float: left;
		}

		.overview-text {
			font-size: 14px;
			color: #ffffff;
		}
	}
}

.chart-box {
	height: 300px;
	width: 100%;
}
</style>
